<template>
  <div :class="['pui-selector', block && 'block']" ref="selectorRef">
    <pui-popper theme="light" @onClose="clickOutsideHandle" @onOpen="toggleOpen" :placement="placement" :disabled="disabled">
      <div :class="['pui-selector_text', store.state.theme, size]">
        <div :class="['pui-selected', isEmpty && 'not-selected']">
          {{ typeof modelValue === 'string' ? selectedText : modelValue.label }}
        </div>
        <pui-icon v-if="!clearAble || isEmpty" :name="`triangle-${componentRef.isShow ? 'up' : 'down'}`"></pui-icon>
        <pui-icon v-if="clearAble && isNotEmpty" name="cancle" @click.stop="clearModelValue"></pui-icon>
      </div>
      <template #popper>
        <div class="pui-selector-content">
          <div class="pui-selector-content_list">
            <div
              :class="[
                'pui-selector-content_item',
                ((typeof modelValue !== 'string' && modelValue.value === item?.value) || modelValue === item?.value) && 'active-item',
              ]"
              v-for="(item, i) in dataList"
              :key="i"
              @click.stop="onSelectHandle(item)"
            >
              {{ item?.label }}
            </div>
            <div class="no-data" v-if="dataList.length === 0">-- 无数据 --</div>
          </div>
        </div>
      </template>
    </pui-popper>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
  name: 'pui-selector',
});
</script>

<script lang="ts" setup>
import { reactive, computed } from 'vue';
import type { Data, Props } from './interface';
import store from '../../stores/index';

const props = withDefaults(defineProps<Props>(), {
  modelValue: '',
  placeholder: '请选择',
  size: 'normal',
  placement: 'bottom',
  type: 'select',
  block: false,
  disabled: false,
  clearAble: false,
});
const emits = defineEmits<{
  onChange: [val: Data | string];
  'update:modelValue': [val: Data | string];
}>();

const componentRef = reactive({
  isShow: false,
  selectedVal: '',
  selectedText: props.placeholder,
});

const isEmpty = computed(() => {
  if (typeof props.modelValue === 'string') {
    return props.modelValue === '';
  }
  return props.modelValue.value === '';
});

const isNotEmpty = computed(() => {
  if (typeof props.modelValue === 'string') {
    return props.modelValue !== '';
  } else {
    return props.modelValue?.value !== '';
  }
});
const selectedText = computed(() => {
  let value: any;
  if (typeof props.modelValue === 'string') {
    value = props.modelValue;
  } else {
    value = props.modelValue.value;
  }
  const selectedArr = props.dataList.filter((item: { value: any }) => item.value === value);
  return selectedArr.length > 0 ? selectedArr[0].label : props.placeholder;
});

const clickOutsideHandle = () => {
  componentRef.isShow = false;
};

const toggleOpen = () => {
  componentRef.isShow = !componentRef.isShow;
};

const clearModelValue = () => {
  const data =
    typeof props.modelValue !== 'string'
      ? {
          value: '',
          label: '',
        }
      : '';
  emits('update:modelValue', data);
};

const onSelectHandle = (data: Data) => {
  componentRef.selectedText = data.label;
  componentRef.selectedVal = data.value;
  emits('update:modelValue', typeof props.modelValue !== 'string' ? data : data.value);
  emits('onChange', data);
};
</script>
